<template>
  <div class="box">
    <!-- 使用 v-bind:class 动态绑定 class -->
    <router-link
      to="/"
      class="c1"
      :class="{ active: isActive1 }"
      @click="toggleActive(1)"
      >文章管理</router-link
    >
    <router-link
      to="/about"
      class="c2"
      :class="{ active: isActive2 }"
      @click="toggleActive(2)"
      >文章发布</router-link
    >
  </div>

  <router-view></router-view>
</template>

<script setup>
import { ref } from "vue";

const isActive1 = ref(true);
const isActive2 = ref(false);

function toggleActive(index) {
  if (index === 1) {
    isActive1.value = !isActive1.value;
    isActive2.value = false;
  } else {
    isActive2.value = !isActive2.value;
    isActive1.value = false;
  }
}
</script>

<style lang="css" scoped>
.box {
  width: 100%;
  background-color: red;
  height: 50px;
  display: flex;
}

.c1,
.c2 {
  text-align: center;
  line-height: 50px;
  flex: 1;
  background-color: #434a50;
  color: white;
  text-decoration-line: none;
  transition: background-color 0.3s, color 0.3s;
}

.active {
  color: yellow;
  background-color: #545c64;
}
</style>
